<template>
  <div class="app-container rank-add">
    <el-form :model="rankForm" :rules="rules" ref="rankForm" label-width="auto">
      <div style="text-align: right">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onCancel">取消</el-button>
      </div>
      <el-card class="mt20 box-card">
        <div slot="header" class="clearfix">
          <span>{{pageTitle}}</span>
        </div>
        <el-row :gutter="20" class="mt20">
          <el-col :md="8" :xs="11">
            <el-form-item label="职级名称" prop="rankName">
              <el-input v-model="rankForm.rankName" placeholder="职级名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="11">
            <el-form-item label="工资标准" prop="wageStandard">
              <el-input v-model="rankForm.wageStandard" placeholder="工资标准" :disabled="true">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="11">
            <el-form-item label="基本工资" prop="basePay">
              <el-input type="number" min="0" v-model="rankForm.basePay" @change="(val)=>getStandard('basePay',val)" placeholder="基本工资">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="11">
            <el-form-item label="岗位工资" prop="postWage">
              <el-input type="number" min="0" v-model="rankForm.postWage" @change="(val)=>getStandard('postWage',val)" placeholder="岗位工资">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="11">
            <el-form-item label="职级补贴" prop="rankSubsidy">
              <el-input type="number" min="0" v-model="rankForm.rankSubsidy" @change="(val)=>getStandard('rankSubsidy',val)" placeholder="职级补贴">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="11">
            <el-form-item label="月度绩效" prop="monthlyPerformance">
              <el-input type="number" min="0" v-model="rankForm.monthlyPerformance" @change="(val)=>getStandard('monthlyPerformance',val)" placeholder="月度绩效">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="11">
            <el-form-item label="全勤奖" prop="fullAttendanceReward">
              <el-input type="number" min="0" v-model="rankForm.fullAttendanceReward" @change="(val)=>getStandard('fullAttendanceReward',val)" placeholder="全勤奖">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="11">
            <el-form-item label="住房补贴" prop="housingAllowance">
              <el-input type="number" min="0" v-model="rankForm.housingAllowance" @change="(val)=>getStandard('housingAllowance',val)" placeholder="住房补贴">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="11">
            <el-form-item label="医保基数" prop="medicalInsuranceBase">
              <el-input type="number" min="0" v-model="rankForm.medicalInsuranceBase" @change="(val)=>getMedicalInsurance('medicalInsuranceBase',val)" placeholder="医保基数">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :md="8" :xs="11">
            <el-form-item label="医保比例" prop="proportionOfMedicalInsurance">
              <el-input type="number" min="0" v-model="rankForm.proportionOfMedicalInsurance" @change="(val)=>getMedicalInsurance('proportionOfMedicalInsurance',val)" placeholder="医保比例">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="11">
            <el-form-item label="养老基数" prop="pensionBase">
              <el-input type="number" min="0" v-model="rankForm.pensionBase" @change="getInsurance" placeholder="养老基数">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="11">
            <el-form-item label="养老比例" prop="proportionOfEndowmentInsurance">
              <el-input type="number" min="0" v-model="rankForm.proportionOfEndowmentInsurance" @change="getEndowmentInsurance" placeholder="养老比例">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :md="8" :xs="11">-->
<!--            <el-form-item label="生育比例" prop="proportionOfMaternityInsurance">-->
<!--              <el-input type="number" min="0" v-model="rankForm.proportionOfMaternityInsurance" @change="getMaternityInsurance" placeholder="生育比例">-->
<!--                <template slot="append">%</template>-->
<!--              </el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :md="8" :xs="11">
            <el-form-item label="失业比例" prop="proportionOfUnemploymentInsurance">
              <el-input type="number" min="0" v-model="rankForm.proportionOfUnemploymentInsurance" @change="getUnemploymentBnsurance" placeholder="失业比例">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :md="8" :xs="11">
            <el-form-item label="医疗保险" prop="medicalInsurance">
              <el-input v-model="rankForm.medicalInsurance" placeholder="医疗保险" :disabled="true">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :md="8" :xs="11">-->
<!--            <el-form-item label="生育保险" prop="maternityInsurance">-->
<!--              <el-input v-model="rankForm.maternityInsurance" placeholder="生育保险" :disabled="true">-->
<!--                <template slot="append">元</template>-->
<!--              </el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :md="8" :xs="11">
            <el-form-item label="养老保险" prop="endowmentInsurance">
              <el-input v-model="rankForm.endowmentInsurance" placeholder="养老保险" :disabled="true">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="11">
            <el-form-item label="失业保险" prop="unemploymentInsurance">
              <el-input v-model="rankForm.unemploymentInsurance" placeholder="失业保险" :disabled="true">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :md="8" :xs="11">
            <el-form-item label="个人代扣合计" prop="individualTotal">
              <el-input v-model="rankForm.individualTotal" placeholder="个人代扣合计" :disabled="true">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-card>

    </el-form>
  </div>

</template>

<script>
  import { addPayRank, editPayRank } from "@/api/personnel/pay/rank";

  export default {
    data(){
      return {
        //页面标题
        pageTitle: '职级新增',
        rankForm: {
          rankName: undefined,
          wageStandard: undefined,  //标准工资
          basePay: undefined,   //基本工资
          postWage: undefined,   //岗位工资
          rankSubsidy: undefined,  //职级补贴
          monthlyPerformance: undefined,  //月度绩效
          fullAttendanceReward: undefined,  //全勤奖
          housingAllowance: undefined,  //住房补贴
          medicalInsuranceBase: undefined,  //医保基数
          proportionOfMedicalInsurance: undefined,  //医保比例
          medicalInsurance: undefined,  //医疗保险
          pensionBase: undefined,  //养老基数
          proportionOfEndowmentInsurance: undefined,  //养老比例
          // proportionOfMaternityInsurance: undefined,  //生育比例
          proportionOfUnemploymentInsurance: undefined,  //失业比例
          // maternityInsurance: undefined,  //生育保险
          endowmentInsurance: undefined,  //养老保险
          unemploymentInsurance: undefined,  //失业保险
          individualTotal: undefined,//个人代扣合计
        },

        rules: {
          rankName: [
            { required: true, message: '请输入职级名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          wageStandard: [
            { required: true, message: '请输入', trigger: 'change' },
          ],
          basePay: [
            { required: true, message: '请输入', trigger: 'change' },
          ],

          postWage: [
            { required: true, message: '请输入', trigger: 'change' },
          ],
          rankSubsidy: [
            { required: true, message: '请输入', trigger: 'change' },
          ],
          monthlyPerformance: [
            { required: true, message: '请输入', trigger: 'change' },
          ],

          fullAttendanceReward: [
            { required: true, message: '请输入', trigger: 'change' },
          ],
          housingAllowance: [
            { required: true, message: '请输入', trigger: 'change' },
          ],
          medicalInsuranceBase: [
            { required: true, message: '请输入', trigger: 'change' },
          ],

          proportionOfMedicalInsurance: [
            { required: true, message: '请输入', trigger: 'change' },
          ],
          pensionBase: [
            { required: true, message: '请输入', trigger: 'change' },
          ],
          proportionOfEndowmentInsurance: [
            { required: true, message: '请输入', trigger: 'change' },
          ],

          proportionOfMaternityInsurance: [
            { required: true, message: '请输入', trigger: 'change' },
          ],
          proportionOfUnemploymentInsurance: [
            { required: true, message: '请输入', trigger: 'change' },
          ],
          medicalInsurance: [
            { required: true, message: '请输入', trigger: 'change' },
          ],

          maternityInsurance: [
            { required: true, message: '请输入', trigger: 'change' },
          ],
          endowmentInsurance: [
            { required: true, message: '请输入', trigger: 'change' },
          ],
          unemploymentInsurance: [
            { required: true, message: '请输入', trigger: 'change' },
          ],
        }
      }
    },
    created(){
      const params = this.$route.query;
      if(params&&params.id){
        console.log(params);
        if(params.type && params.type === 'copy'){
          this.pageTitle = '职级复制';
          this.getRankCopyDetail(params)
        }else {
          this.pageTitle = '职级编辑';
          // 详情数据
          this.getRankDetail(params)
        }

      }
    },
    mounted(){
    },
    computed: {
      areaNum(){  //获取区域数组
        return new Set(this.staffData.map(o => o.regionName));
      },
      groupNum(){  //获取组别数组
        return new Set(this.staffData.map(o => o.groupName));
      },

    },
    methods:{
      //获取详情信息
      getRankDetail(params){
        this.rankForm = {
          ...this.rankForm,
          ...params
        }
      },
      //获取复制详情信息
      getRankCopyDetail(params){
        this.rankForm = {
          ...this.rankForm,
          ...params,
          rankName: undefined,
          wageStandard: undefined,  //标准工资
          basePay: undefined,   //基本工资
          postWage: undefined,   //岗位工资
          rankSubsidy: undefined,  //职级补贴
        }
      },

      //获取标准工资
      getStandard(type,val){
        if(this.isEmpty(val)){
          //为空重置标准工资
          this.rankForm.wageStandard = undefined;
        }else if(val<0){
          this.rankForm[type] = undefined;
          this.rankForm.wageStandard = undefined;
        }else {
          this.$nextTick(() => {
            // console.log(this.rankForm[type], this.rankForm);
            //判断 基本工资+岗位工资+岗位补贴+绩效+住宿补贴+全勤奖
            const { basePay, postWage, rankSubsidy, monthlyPerformance, housingAllowance, fullAttendanceReward  } = this.rankForm;

            if(!this.isEmpty(basePay) && !this.isEmpty(postWage) && !this.isEmpty(rankSubsidy) && !this.isEmpty(monthlyPerformance) && !this.isEmpty(housingAllowance) && !this.isEmpty(fullAttendanceReward)){
              const standard = basePay*1 + postWage*1 + rankSubsidy*1 + monthlyPerformance*1 + housingAllowance*1 + fullAttendanceReward*1;
              // console.log(standard)
              this.rankForm.wageStandard = standard.toFixed(2);
            }
          })
        }
      },
      //医疗保险
      getMedicalInsurance(type,val){
        if(this.isEmpty(val)){
          //为空重置医疗保险
          this.rankForm.medicalInsurance = undefined;
        }else if(val<0){
          this.rankForm[type] = undefined;
          this.rankForm.medicalInsurance = undefined;
        }else {
          this.$nextTick(() => {
            // console.log(this.rankForm[type], this.rankForm);
            //判断 医保基数*医保比例
            const { medicalInsuranceBase, proportionOfMedicalInsurance  } = this.rankForm;
            if(!this.isEmpty(medicalInsuranceBase) && !this.isEmpty(proportionOfMedicalInsurance)){
              const medicalInsurance = medicalInsuranceBase * proportionOfMedicalInsurance / 100;
              this.rankForm.medicalInsurance = medicalInsurance.toFixed(2);
              this.total();
            }
          })
        }



      },
      //养老保险
      getEndowmentInsurance(val){
        if(this.isEmpty(val)){
          //为空重置养老保险
          this.rankForm.endowmentInsurance = undefined;
        }else if(val<0){
          this.rankForm.proportionOfEndowmentInsurance = undefined;
          this.rankForm.endowmentInsurance = undefined;
        }else {
          this.$nextTick(() => {
            // console.log(this.rankForm[type], this.rankForm);
            //判断 医保基数*医保比例
            const { proportionOfEndowmentInsurance, pensionBase  } = this.rankForm;
            if(!this.isEmpty(proportionOfEndowmentInsurance) && !this.isEmpty(pensionBase)){
              const endowmentInsurance = proportionOfEndowmentInsurance * pensionBase / 100;
              this.rankForm.endowmentInsurance = endowmentInsurance.toFixed(2);
              this.total();
            }
          })
        }

      },
      //失业保险
      getUnemploymentBnsurance(val){
        if(this.isEmpty(val)){
          //为空重置失业保险
          this.rankForm.unemploymentInsurance = undefined;
        }else if(val<0){
          this.rankForm.proportionOfUnemploymentInsurance = undefined;
          this.rankForm.unemploymentInsurance = undefined;
        }else {
          this.$nextTick(() => {
            // console.log(this.rankForm[type], this.rankForm);
            //判断 失业保险=养老基数*失业比例
            const { proportionOfUnemploymentInsurance, pensionBase  } = this.rankForm;
            if(!this.isEmpty(proportionOfUnemploymentInsurance) && !this.isEmpty(pensionBase)){
              const unemploymentInsurance = proportionOfUnemploymentInsurance * pensionBase / 100;
              this.rankForm.unemploymentInsurance = unemploymentInsurance.toFixed(2);
              this.total();
            }
          })
        }

      },
      //生育保险
      getMaternityInsurance(val){
        if(this.isEmpty(val)){
          //为空重置生育保险
          this.rankForm.maternityInsurance = undefined;
        }else if(val<0){
          this.rankForm.proportionOfMaternityInsurance = undefined;
          this.rankForm.maternityInsurance = undefined;
        }else {
          this.$nextTick(() => {
            // console.log(this.rankForm[type], this.rankForm);
            //判断 生育保险=养老基数*生育比例
            const { proportionOfMaternityInsurance, pensionBase  } = this.rankForm;
            if(!this.isEmpty(proportionOfMaternityInsurance) && !this.isEmpty(pensionBase)){
              const maternityInsurance = proportionOfMaternityInsurance * pensionBase / 100;
              this.rankForm.maternityInsurance = maternityInsurance.toFixed(2)
            }
          })
        }
      },
      // 养老保险=养老基数*养老比例。 失业保险=养老基数*失业比例 生育保险=养老基数*生育比例
      getInsurance(val){
        if(this.isEmpty(val)){
          //为空重置
          this.rankForm = {
            ...this.rankForm,
            endowmentInsurance: undefined,
            unemploymentInsurance: undefined,
            maternityInsurance: undefined,
          }
        }else if(val<0){
          this.rankForm = {
            ...this.rankForm,
            pensionBase: undefined,
            endowmentInsurance: undefined,
            unemploymentInsurance: undefined,
            maternityInsurance: undefined,
          }
        }else {
          this.$nextTick(() => {
            // console.log(this.rankForm[type], this.rankForm);
            //判断 养老保险=养老基数*养老比例
            const { proportionOfEndowmentInsurance, pensionBase, proportionOfUnemploymentInsurance, proportionOfMaternityInsurance  } = this.rankForm;
            if(!this.isEmpty(proportionOfEndowmentInsurance) && !this.isEmpty(pensionBase)){
              const endowmentInsurance = proportionOfEndowmentInsurance * pensionBase / 100;
              this.rankForm.endowmentInsurance = endowmentInsurance.toFixed(2)
            }
            //判断 失业保险=养老基数*失业比例
            if(!this.isEmpty(proportionOfUnemploymentInsurance) && !this.isEmpty(pensionBase)){
              const unemploymentInsurance = proportionOfUnemploymentInsurance * pensionBase / 100;
              this.rankForm.unemploymentInsurance = unemploymentInsurance.toFixed(2)
            }
            // //判断 生育保险=养老基数*生育比例
            // if(!this.isEmpty(proportionOfMaternityInsurance) && !this.isEmpty(pensionBase)){
            //   const maternityInsurance = proportionOfMaternityInsurance * pensionBase / 100;
            //   this.rankForm.maternityInsurance = maternityInsurance.toFixed(2)
            // }

          })
          this.total();
        }
      },
      //数据是否为空
      isEmpty(val){
        if (val === '' || val === undefined || val === null) {
          return true
        }
        return false
      },
      //取消
      onCancel(){
        this.$router.replace({path:"/basic/rank"});
      },
      addPayRank(params){
        addPayRank(params).then(res=>{
          console.log(res);
          if(res && res.code === 200){
            this.msgSuccess(res.msg || '添加失败')
            this.$router.replace({path:"/basic/rank"});
          }else {
            this.msgSuccess(res && res.msg || '请求错误')
          }
        })
      },
      editPayRank(params){
        editPayRank(params).then(res=>{
          console.log(res);
          if(res && res.code === 200){
            this.msgSuccess(res.msg || '修改失败')
            this.$router.replace({path:"/basic/rank"});
          }else {
            this.msgSuccess(res && res.msg || '请求错误')
          }
        })
      },
      //保存
      onSubmit: function(){
        this.$refs["rankForm"].validate(valid => {
          if (valid) {
            console.log(valid,this.rankForm);
            const params = this.rankForm;
            //删除params字段
            if(params.params){
              delete params.params;
            }
            //删除复制的id字段
            if(params.type && params.type === 'copy'){
              delete params.id;
            }
            // console.log(params);
            //新增 or 编辑
            if(params.id){
              this.editPayRank(params)
            }else {
              this.addPayRank(params)
            }

          }
        })
      },

      total:function(){
        let medicalInsurance =0;
        let endowmentInsurance =0;
        let unemploymentInsurance =0;
        if( this.rankForm.medicalInsurance !=undefined && this.rankForm.medicalInsurance !=null){
          medicalInsurance = this.rankForm.medicalInsurance;
        }

        if( this.rankForm.endowmentInsurance !=undefined && this.rankForm.endowmentInsurance !=null){
          endowmentInsurance = this.rankForm.endowmentInsurance;
        }
        if( this.rankForm.unemploymentInsurance !=undefined && this.rankForm.unemploymentInsurance !=null){
          unemploymentInsurance = this.rankForm.unemploymentInsurance;
        }
        this.rankForm.individualTotal=+Number(medicalInsurance)+Number(endowmentInsurance)+Number(unemploymentInsurance);
        if(his.rankForm.individualTotal==0){
          this.rankForm.individualTotal=undefined;
        }
      },


    }
  }
</script>

<style>
  .rank-add input::-webkit-outer-spin-button,
  .rank-add input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
  }
  .rank-add input[type="number"] {
    -moz-appearance: textfield;
  }
</style>
